<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>书籍列表</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div class="container">
  <div class="container">
    <h1 align="center">书籍列表</h1>
    <!-- 添加一个跳转到图书列表主页的按钮 -->
    <a th:href="@{/books/list}" class="btn btn-primary">
      <i class="fas fa-home"></i> 主页
    </a>
    <!-- 添加一个跳转到分类列表的按钮 -->
    <a th:href="@{/categories/list}" class="btn btn-primary">
      <i class="fas fa-list"></i> 分类
    </a>
    <a class="btn btn-success" th:href="@{/books/add}">
      <i class="fas fa-plus"></i> 添加书籍
    </a>
    <div class="my-3"></div> <!-- 插入一个空的<div>元素来创建间距 -->
    <form th:action="@{/books/search}" method="post" class="mb-3">
      <div class="input-group">
        <input type="text" name="keyword" class="form-control" placeholder="搜索...">
        <select name="searchBy" class="form-select">
          <option value="title">名称</option>
          <option value="author">作者</option>
        </select>
        <button type="submit" class="btn btn-primary">
          <i class="fas fa-search"></i> 搜索
        </button>
      </div>
    </form>
    <table class="table">
      <thead>
      <tr>
        <th><a th:href="@{/books/page/1(currentPage=${currentPage}, pageSize=5, sortField='title', sortDir=${sortField == 'title' and sortDir == 'asc' ? 'desc' : 'asc'})}">名称</a></th>
        <th><a th:href="@{/books/page/1(currentPage=${currentPage}, pageSize=5, sortField='author', sortDir=${sortField == 'author' and sortDir == 'asc' ? 'desc' : 'asc'})}">作者</a></th>
        <th><a th:href="@{/books/page/1(currentPage=${currentPage}, pageSize=5, sortField='category', sortDir=${sortField == 'category' and sortDir == 'asc' ? 'desc' : 'asc'})}">分类</a></th>
        <th><a th:href="@{/books/page/1(currentPage=${currentPage}, pageSize=5, sortField='publishDate', sortDir=${sortField == 'publishDate' and sortDir == 'asc' ? 'desc' : 'asc'})}">出版日期</a></th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="book : ${books}">
        <td th:text="${book.title}"></td>
        <td th:text="${book.author}"></td>
        <td th:text="${book.category.name}"></td>
        <td th:text="${book.publishDate}"></td>
        <td>
          <a class="btn btn-primary" th:href="@{/books/edit/{id}(id=${book.id})}"><i class="fas fa-edit"></i> 编辑</a>
          <a class="btn btn-danger" th:href="@{/books/delete/{id}(id=${book.id})}"><i class="fas fa-trash"></i> 删除</a>
        </td>
      </tbody>
    </table>
    <div>
      当前页: <span th:text="${currentPage}"></span>
    </div>
    <div class = "col-sm-3">
      总行数: [[${totalItems}]]
    </div>

    <div class="container">
      <div class="row">
        <div class="col text-center">
          <div class="btn-group" role="group" aria-label="Pagination">
            <a class="btn btn-secondary" th:href="@{/books/page/1(currentPage=${currentPage}, pageSize=5, sortField=${sortField}, sortDir=${sortDir})}">
              <i class="fas fa-angle-double-left"></i> 第一页
            </a>
            <a class="btn btn-secondary" th:href="@{/books/page/__${currentPage - 1}__(currentPage=${currentPage}, pageSize=5, sortField=${sortField}, sortDir=${sortDir})}"
               th:classappend="${currentPage == 1} ? 'disabled'">
              <i class="fas fa-angle-left"></i> 上一页
            </a>
            <div class="d-flex align-items-center">
              <div th:each="pageNum : ${#numbers.sequence(1, totalPages)}">
                <a th:href="@{/books/page/__${pageNum}__(currentPage=${pageNum}, pageSize=5, sortField=${sortField}, sortDir=${sortDir})}"
                   th:classappend="${currentPage == pageNum} ? 'btn btn-secondary active mx-1' : 'btn btn-secondary mx-1'">
                  <span th:text="${pageNum}"></span>
                </a>
              </div>
            </div>
            <a class="btn btn-secondary" th:href="@{/books/page/__${currentPage + 1}__(currentPage=${currentPage}, pageSize=5, sortField=${sortField}, sortDir=${sortDir})}"
               th:classappend="${currentPage == totalPages} ? 'disabled'">
              <i class="fas fa-angle-right"></i> 下一页
            </a>
            <a class="btn btn-secondary" th:href="@{/books/page/__${totalPages}__(currentPage=${totalPages}, pageSize=5, sortField=${sortField}, sortDir=${sortDir})}">
              <i class="fas fa-angle-double-right"></i> 最后一页
            </a>
          </div>
        </div>
      </div>
    </div>



  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>